<template>
  <div class="theme-active-text-color">
    <search-table-template tableTitleTxt='合同列表'>
      <template slot="tableTitleRight">
        <el-button type="primary" @click="download">下载表格</el-button>
      </template>
        <template slot="tableContent">
          <el-table
          :data="tableData"
          border
          stripe
          style="width: 100%">
          <el-table-column
            prop="agree_id"
            label="合同编码"
            align="center"
            >
          </el-table-column>
          <el-table-column
            prop="sign_time"
            label="签订时间"
            align="center"
            >
            <template slot-scope="scope">
              <span>{{ scope.row.sign_time | filterTime }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="applyer"
            label="签订人"
            align="center"
            >
          </el-table-column>
          <el-table-column
            prop="has_settle"
            label="结算金额"
            align="center"
            >
          </el-table-column>
          <el-table-column
            prop="no_settle"
            label="未结算金额"
            align="center"
            >
          </el-table-column>
          <el-table-column
            prop="is_complete"
            label="是否履约完成"
            align="center"
            >
            <template slot-scope="scope">
              <span>{{ scope.row.is_complete == 0 ? '否':'是' }}</span>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            align="center"
            >
            <template slot-scope="scope">
              <el-button @click="toAgreeDetail(scope.row.agree_id)" type="text" size="small">送货核对</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
            :pageData="pageData"
            @onSearch="paginationSearch(arguments)"
        ></pagination>
        </template>
    </search-table-template>
  </div>
</template>

<script>
import SearchTableTemplate from '../../components/template/SearchTableTemplate.vue';
import Pagination from "@/components/Pagination";
import { agreeListApi } from '@/api';
import fileExport from "@/utils/fileExport";

export default {
  name: "",
  components: {
    SearchTableTemplate,
    Pagination
  },
  data() {
    return {
      tableData:[],
      pageData: {
        pageNum: 1,
        pageSize: 20,
        pageTotal: 0,
        currentPage: 1
      },
    };
  },
  filters:{
    filterTime(val){
      let time = new Date(val)
      let year = time.getFullYear()
      let mouth = time.getMonth()+1
      let date = time.getDate()
      return year+'-'+mouth+'-'+date
    }
  },
  created() {
    this.getGoodsList()
  },
  methods: {
    async getGoodsList(){
      let res = await agreeListApi();
      if(res){
        console.log("res",res)
        this.tableData = res.data
      }
    },

    toAgreeDetail(id){
      this.$router.push({
        path:'agreeDetail',
        query:{
          agree_id:id
        }
      })
    },
    
    paginationSearch(data) {
      this.pageData.pageSize = data[1];
    },

    download(){
      fileExport('goods.xlsx',{},'/download')
    }
  }
};
</script>
<style lang="less" scoped>
.goods_img{
  width: 80%;
}

</style>
